<template>
    <div class="box">
        <div class="header" v-show="$route.meta">
            <div class="logo">

            </div>
            <div class="header-right">
                <div><a href="#">在线客服</a></div>
                <div><a href="#">常见问题</a></div>
                <div><a href="#">安全中心</a></div>
                <div @click="gologin">{{info}}</div>
                <div @click="exit">退出</div>
            </div>
        </div>
        <el-container style="min-height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: white" v-show="$route.meta">
                <el-menu>
                    <router-link :to="{name:'home'}"><el-menu-item index="1-1">首页</el-menu-item></router-link>
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-folder-opened
"></i>学生信息管理</template>
                       
                            
                            <router-link :to="{name:'studentinfo'}">
                                <el-menu-item index="1-1">学生信息录入</el-menu-item>
                            </router-link>
                            <router-link :to="{name:'searchhome'}">
                                <el-menu-item index="1-2">学生信息查询</el-menu-item>
                            </router-link>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>学生成绩管理</template>
                        <el-menu-item-group>
                            <template slot="title">成绩录入</template>
                            <router-link :to="{name:'entry_exam'}">
                                <el-menu-item index="2-1">入学成绩录入</el-menu-item>
                            </router-link>
                            <router-link :to="{name:'mid_exam'}">
                                <el-menu-item index="2-2">期中成绩录入</el-menu-item>
                            </router-link>
                            <router-link :to="{name:'end_exam'}">
                                <el-menu-item index="2-3">期末成绩录入</el-menu-item>
                            </router-link>
                        </el-menu-item-group>
                        <el-menu-item-group title="成绩查询">
                            <router-link :to="{name:'search_entry'}">
                                <el-menu-item index="2-4">入学成绩查询</el-menu-item>
                            </router-link>
                            <router-link :to="{name:'search_mid'}">
                                <el-menu-item index="2-5">期中成绩查询</el-menu-item>
                        </router-link>
                        <router-link :to="{name:'search_end'}">
                            <el-menu-item index="2-6">期末成绩查询</el-menu-item>
                        </router-link>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-pie-chart"></i>成绩分析</template>
                        <router-link :to="{name:'stuinfoanalysis'}">
                            <el-menu-item index="3-1">成绩分析</el-menu-item>
                        </router-link>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { RouterLink } from 'vue-router';

export default {
    data() {
        return {
            
        };
    },
    components: { RouterLink },
    computed:{
        info(){
            return this.$store.state.user_name ? this.$store.state.user_name: "登录"
        }
    },
    methods:{
        exit(){
            localStorage.clear();
            sessionStorage.clear();
            window.open("about:blank","_self");
            window.close();
        },
        gologin(){
            if(this.$store.state.user_name){
                this.$router.push({
                    name:'user_conter'
                })
            }else{
                this.$router.push({
                    name:'login'
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.box{
    .header{
        height: 50px;
        background-color: #B3C0D1;
        display: flex;
        justify-content: space-between;
        .header-right{
            display: flex;
            align-items: center;
            a{
                margin: 0 10px;
            }
        }
    }
}
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
.el-card__body, .el-main {
    padding: 0px;
}
</style>